import React from "react"
import { View, Image, ActivityIndicator } from "react-native"
import FastImage from "react-native-fast-image"
import { CachedImage } from 'react-native-cached-fast-image'

export class Cimage extends React.PureComponent{
    render(){
        const {uri, resizeMode, ...other} = this.props;
        return <CachedImage
            source={{uri}}
            resizeMode = {resizeMode || "cover" }
            fallbackSource = {require("./_images/fimage.png")}
            activityIndicatorProps = {{size:'large', animating:true,}}
            { ...other }
        />;
    }
}

// 图片组件, 加载未完成或者无图的时候，会显示一张默认底图
export class Fimage extends React.PureComponent{
    render(){
        // 绝对位置请在外面包一个View
        const {style, uri, resizeMode, ...other} = this.props;
        const {width, height, 
            padding,
            paddingLeft,
            paddingRight,
            paddingTop,
            paddingBottom,
            paddingHorizontal,
            paddingVertical,
            margin,
            marginLeft,
            marginRight,
            marginTop,
            marginBottom,
            marginHorizontal,
            marginVertical,
            ...style2} = style;
        return <View style={style}>
            <Image style = {{position:"absolute", width, height, ...style2}} source={require("./_images/fimage.png")}/>
            {
                (!uri) ?  null :
                <FastImage
                    style={{width, height, ...style2}}
                    resizeMode = {resizeMode || FastImage.resizeMode.cover}
                    source = {{
                        uri,
                        headers:{ Authorization: 'someAuthToken' },
                        // priority: FastImage.priority.normal,
                        cache: FastImage.cacheControl.web,
                    }}
                    {...other}
                />
            }
        </View>
    }
}